UI 화면 디버깅하기

DevTools에서 화면 문제를 좁히고, 거래 요청을 로그와 연결합니다.

QCN

HandStack UI의 특징 (1/2)

  • HandStack 기반 UI 화면은 서버 코드에 의존하지 않는 표준 HTML, CSS, JavaScript로 구성됩니다.

  • 화면에 적용된 상용·오픈소스 컨트롤과 라이브러리 버전을 확인합니다.

  • 도메인에 맞게 조정된 syn.loader.js 에서 화면에 필요한 스크립트만 선택적으로 사용 가능합니다.

QCN

HandStack UI의 특징 (2/2)

  • UI 디버깅을 위해 업계 표준 도구인 Chrome DevTools 사용을 권장합니다.
QCN

크롬 개발자 도구 (Chrome DevTools) (1/2)

Chrome DevTools는 Google Chrome 브라우저에 내장된 웹 개발 필수 도구입니다.

  • 웹 페이지를 실시간으로 편집하고 문제를 빠르게 진단

  • 재현 입력과 오류가 발생한 위치를 확인

  • 실시간 소스 코드 편집기 기능 제공

QCN

크롬 개발자 도구 (Chrome DevTools) (2/2)

운영 체제에 따라 실행 단축키가 달라집니다. F12

  • Windows/Linux: Shift + CTRL + J
  • macOS: Option + ⌘ + J
QCN

Chrome DevTools 주요 패널 소개 (1/3)

  • Elements 패널: DOM과 CSS를 자유롭게 조작하여 사이트의 레이아웃과 디자인을 정의합니다.

  • Console 패널: 개발 중 진단 정보를 남기고, 페이지의 JavaScript와 상호작용합니다.

QCN

Chrome DevTools 주요 패널 소개 (2/3)

  • Sources 패널: 브레이크포인트를 사용해 JavaScript를 디버깅하거나, DevTools를 코드 에디터로 사용합니다.

    • HandStack에서는 Node.js Function 디버깅에도 활용됩니다.

  • Network 패널: 클라이언트-서버 간 요청 문제를 디버깅하고, 페이지 로딩 성능을 최적화합니다.

QCN

Chrome DevTools 주요 패널 소개 (3/3)

  • Application 패널: 스토리지, 쿠키, 캐시, 폰트, 이미지 등 로딩된 모든 리소스를 검사합니다.
QCN

Elements 패널 (1/2)

Elements에서 DOM 구조와 적용된 CSS를 확인하고 수정 결과를 비교합니다.

QCN

Elements 패널 (2/2)

QCN

Console 패널

Console에서 진단 로그·오류와 JavaScript 실행 결과를 확인합니다.

QCN

Sources 패널 (1/3)

Sources 에서 브레이크 포인트를 사용해 자바스크립트를 디버깅하거나 Workspace를 로컬파일에 연결하여 DevTools를 코드 에디터로 사용할 수 있습니다.

HandStack에서는 Node.js Function 디버깅에서도 Chrome DevTools를 사용합니다.

QCN

Sources 패널 (2/3)

QCN

Sources 패널 (3/3)

QCN

Network 패널 (1/2)

클라이언트 서버 간의 요청 관련 문제의 디버깅과 페이지 로딩 성능을 최적화에 사용합니다.

QCN

Network 패널 (2/2)

QCN

Application 패널

로컬 및 세션 스토리지, 쿠키, 어플리케이션 캐시, 이미지, 폰트, 스타일시트를 포함한 로딩된 모든 리소스를 검사합니다.

QCN

잠깐, 구분해 보기

콘솔에서 $this가 없으면 코드가 잘못된 것일까요?

QCN

여러 iframe에서 컨텍스트 포커스 얻기 (1/3)

iframe을 사용하는 UI에서 특정 iframe 내부를 디버깅해야 할 때가 있습니다.

QCN

여러 iframe에서 컨텍스트 포커스 얻기 (2/3)

  • 해결 방법
    • Elements 탭의 요소 선택 버튼 (Shift + CTRL + C)을 클릭합니다.
    • 디버깅하려는 iframe 내의 요소를 선택합니다.
    • Console의 실행 컨텍스트가 해당 iframe으로 변경됩니다.
QCN

여러 iframe에서 컨텍스트 포커스 얻기 (3/3)

image center

QCN

콘솔의 DOM 선택 도우미 (1/3)

Chrome DevTools의 $·$$는 콘솔용 도우미입니다. 페이지가 jQuery 등으로 $를 정의했다면 그 정의가 우선하므로 반환 값을 확인합니다.

QCN

콘솔의 DOM 선택 도우미 (2/3)

  • $(SELECTOR)
    • document.querySelector와 동일하게, 셀렉터에 해당하는 첫 번째 요소를 반환합니다.
    • 예: $('#myId'), $('.myClass')
QCN

콘솔의 DOM 선택 도우미 (3/3)

  • $$(SELECTOR)
    • document.querySelectorAll과 동일하게, 셀렉터에 해당하는 모든 요소를 배열로 반환합니다.
// 예시: ID가 'saveButton'인 버튼 요소 가져오기
const saveButton = $('#saveButton');

// 예시: 클래스가 'item'인 모든 요소 가져오기
const allItems = $$('.item');
QCN

DOM 요소의 Event Listener 확인하기 (1/2)

특정 DOM 요소에 어떤 이벤트 리스너가 연결되어 있는지 확인할 수 있습니다.

  • getEventListeners()
    • Elements 탭에서 DOM 요소를 선택한 후, 콘솔에 입력합니다.
    • 해당 요소에 연결된 모든 이벤트 리스너를 객체 형태로 반환합니다.
QCN

DOM 요소의 Event Listener 확인하기 (2/2)

// Elements 탭에서 확인하고 싶은 버튼을 선택한 상태라고 가정
getEventListeners($('#myButton'))

// 반환된 객체에서 특정 이벤트(예: click)의 리스너 함수 확인
// getEventListeners($('#myButton')).click[0].listener
QCN

이벤트 실시간 모니터링 (1/2)

특정 DOM 요소에서 발생하는 이벤트를 실시간으로 콘솔에 기록합니다.

  • monitorEvents() / unmonitorEvents()
    • 디버깅 중 이벤트 발생 순서나 빈도를 파악할 때 유용합니다.
    • 주의: 성능 저하를 유발할 수 있으므로, 사용 후에는 반드시 unmonitorEvents()로 중지해야 합니다.
QCN

이벤트 실시간 모니터링 (2/2)

// #myButton에서 발생하는 모든 이벤트를 모니터링
monitorEvents($('#myButton'));

// 'click'과 'mouseover' 이벤트만 모니터링
monitorEvents($('#myButton'), ['click', 'mouseover']);

// 모니터링 중지
unmonitorEvents($('#myButton'));
QCN

브레이크포인트 실시간으로 걸기 (1/2)

소스 코드를 직접 수정하지 않고, 함수 이름만으로 브레이크포인트를 설정할 수 있습니다. 운영 환경 등 소스 원본이 없을 때 매우 유용합니다.

  • debug(함수명)
    • 해당 함수가 호출되는 시점에 실행이 멈추고 Sources 패널로 전환됩니다.
QCN

브레이크포인트 실시간으로 걸기 (2/2)

  • undebug(함수명)
    • 설정했던 브레이크포인트를 해제합니다.
// 'calculateTotal' 함수가 호출될 때 디버거를 실행
debug(calculateTotal);

// 디버깅 완료 후 브레이크포인트 해제
undebug(calculateTotal);
QCN

함수 호출 매개변수 출력 (1/2)

console.log를 코드에 추가하지 않고도, 함수가 호출될 때 전달되는 매개변수를 콘솔에서 실시간으로 확인할 수 있습니다.

  • monitor(함수명)
    • 해당 함수가 호출될 때마다, 전달된 인수(arguments)를 콘솔에 출력합니다.
QCN

함수 호출 매개변수 출력 (2/2)

  • unmonitor(함수명)
    • 설정했던 매개변수 출력을 중지합니다.
// 'fetchData' 함수가 호출될 때마다 인수를 콘솔에 출력
monitor(fetchData);

// 모니터링 중지
unmonitor(fetchData);
QCN

DevTools를 실시간 코드 에디터로 (Workspace) (1/2)

DevTools를 단순 디버거가 아닌, 실시간 코드 에디터로 활용할 수 있습니다.

QCN

DevTools를 실시간 코드 에디터로 (Workspace) (2/2)

  • Workspace란?
    • 로컬 프로젝트 폴더를 DevTools의 Sources 패널에 직접 연결하는 기능입니다.
    • 연결된 CSS·JS의 변경을 로컬 파일에 저장할 수 있습니다.
    • 에디터와 브라우저를 오가는 비효율을 줄여 개발 속도를 크게 향상시킵니다.
QCN

Workspace 설정 방법 (1/3)

  1. Sources 패널의 왼쪽 Filesystem 탭을 선택합니다.

  2. + Add folder to workspace를 클릭하여 로컬 프로젝트 폴더(예: wwwroot)를 추가합니다.

  3. 브라우저 상단에 표시되는 접근 권한을 허용합니다.

QCN

Workspace 설정 방법 (2/3)

  1. 로컬 파일(예: app.css)을 우클릭하여 Map to network resource...를 선택, 현재 페이지에 로드된 파일과 연결합니다.

  2. 파일 아이콘 옆에 녹색 점(●)이 표시되면 성공적으로 연결된 것입니다.

QCN

Workspace 설정 방법 (3/3)

연결된 CSS·JS의 저장 여부를 로컬 diff로 확인합니다. 모든 DOM 편집이 원본 HTML에 저장되는 것은 아닙니다. UI·자동 매핑 방식은 Chrome 버전에 따라 다를 수 있습니다.

QCN

디버깅 명령 빠른 참조 (1/3)

  • 콘솔창 지우기: clear() 또는 단축키 Ctrl + L
QCN

디버깅 명령 빠른 참조 (2/3)

명령어 기능
$(sel), $$(sel) DOM 요소를 쉽게 선택
getEventListeners() 요소에 연결된 이벤트 리스너 확인
monitorEvents() 요소의 이벤트를 실시간으로 추적
debug() 함수 호출 시점에 브레이크포인트 설정
monitor() 함수 호출 시 전달되는 매개변수 출력
Workspace DevTools를 실시간 코드 에디터로 활용
QCN

디버깅 명령 빠른 참조 (3/3)

Network에서 요청·응답의 GlobalID를 기록한 뒤 서버 거래 로그와 연결합니다.

QCN

디버깅 기록에 남길 것

  • 증상·재현 입력·실행 프레임을 기록합니다.
  • Elements·Console·Sources·Network·Application 중 근거가 있는 패널을 고릅니다.
  • 거래 GlobalID로 서버 로그와 연결하고 임시 감시·중단점을 해제합니다.
QCN

발표: 첫 화면의 목표를 말한 뒤 핵심 개념과 예제로 진행합니다. 확인 질문 뒤에는 답할 시간을 주고, 마지막 완료 기준을 남겨 질문을 받습니다. 발표 구성 참고: MIT OpenCourseWare, Patrick Winston, How to Speak (2018), https://ocw.mit.edu/courses/res-tll-005-how-to-speak-january-iap-2018/pages/how-to-speak/

질문 후 잠시 기다립니다. 확인할 답: 현재 Console이 업무 화면 iframe의 실행 컨텍스트인지 먼저 확인합니다.

마지막 기준을 화면에 남겨 질문을 받습니다.